<script setup>
import inlineitem from '../inlineitem.vue'
import jsonToMap from '../../j2m.js'
import gundata from '../../data/SquadTalentGunData.json'
import groupdata from '../../data/SquadTalentGroupData.json'
import genedata from '../../data/GroupTalentEffectGeneData.json'
import keydata from '../../data/TalentKeyData.json'
import skilldata from '../../data/BattleSkillDisplayData.json'
import attrs from '../../data/attrs.json'
import { store } from '../../store/store.js'
import { getParsedText } from '../../store/txtstore.js'

const props = defineProps(['uid'])

const gunData = jsonToMap(gundata.data)
const groupData = jsonToMap(groupdata.data)
const geneData = jsonToMap(genedata.data)
const keyData = jsonToMap(keydata.data)
const skillData = jsonToMap(skilldata.data)

const talent = gunData.get(props.uid)
const ruid = talent[8] || props.uid
const finalKey = keyData.get(talent[13])
const finalKeyAttr = Object.entries(store.properties.get(finalKey[5]))
finalKeyAttr.shift()

const tree = []
const talentSum = {}
const costSum = {}
for (let p = 7; --p;) {
  const col = []
  const rmax = p % 2 ? 2 : 4
  for (let r = 1; r < rmax; r++) {
    const pid = +`${ruid}${String(p).padStart(3, '0')}${String(r).padStart(3, '0')}`
    const gene = geneData.get(groupData.get(pid)[8])
    const g = { cost: groupData.get(pid)[12].map(o => Object.values(o)) }
    for (const c of g.cost) {
      if (!costSum[c[0]]) {
        costSum[c[0]] = c[1]
      } else {
        costSum[c[0]] += c[1]
      }
    }
    if (gene[4]) {
      let effect = store.properties.get(gene[4])
      delete effect[1]
      g.effect = Object.entries(effect)
      for (const pair of g.effect) {
        if (!talentSum[pair[0]]) {
          talentSum[pair[0]] = pair[1]
        } else {
          talentSum[pair[0]] += pair[1]
        }
      }
    } else {
      g.key = keyData.get(gene[6])
    }
    g.type = g.effect ? 1 : 3
    r < 3 && col.unshift(g) || col.push(g)
  }
  tree.unshift(col)
}

function pr(arr) {
  if (arr[0] < 9) {
    return arr[1]
  }
  return arr[1] / 10 + '%'
}

function mapAttr(arr) {
  return arr.map(pair => attrs[pair[0]] + '+' + pr(pair)).join('\t')
}
</script>

<template>
  <table>
    <tr>
      <th></th>
      <th>01</th>
      <th>02</th>
      <th>03</th>
    </tr>
    <template v-for="(col, index) of tree">
      <tr>
        <td rowspan="2">{{ index + 1 }}</td>
        <td v-for="g of col" :class="{ key: g.type == 3 }" :colspan="4 - col.length">
          <div>{{
            g.type == 1 ?
            mapAttr(g.effect) :
            getParsedText(g.key[7][1])
          }}</div>
          <div v-if="g.type == 3" v-html="getParsedText(skillData.get(g.key[6])[3][1])"></div>
        </td>
      </tr>
      <tr>
        <td v-for="g of col" class="cost" :colspan="4 - col.length">
          <template v-for="cost of g.cost">
            <inlineitem :item-id="cost[0]" :num="cost[1]" show-name="show-name" />
          </template>
        </td>
      </tr>
    </template>
    <tr v-if="finalKey">
      <td>#</td>
      <td colspan="3" class="key final-key">
        <div>{{ getParsedText(finalKey[7][1]) }}</div>
        <div>{{ mapAttr(finalKeyAttr) }}</div>
        <div v-html="getParsedText(skillData.get(finalKey[6])[3][1])"></div>
      </td>
    </tr>
  </table>
  <p>加成总计：</p>
  <ul>
    <li v-for="(value, key) in talentSum">{{ attrs[key] + '+' + pr([key, value]) }}</li>
  </ul>
  <p>开销总计：</p>
  <ul>
    <li v-for="(value, key) in costSum">
      <inlineitem :item-id="key" :num="value" show-name="show-name" />
    </li>
  </ul>
</template>

<style scoped>
table {
  border: 1px solid gray;
  border-collapse: collapse;
}

th,
td {
  border-top: 1px solid gray;
  border-left: 2px double gray;
  padding: 0 2px;
}

tr:nth-child(2n) td:first-child,
th:first-child {
  border-left: 1px solid gray;
}

td {
  text-align: center;
}

td.key {
  text-align: left;
}

td.key div:first-child {
  color: dodgerblue;
  text-align: center;
}

td.final-key {
  text-align: center;
}

td.cost {
  background: rgba(0, 0, 0, .1);
  border-top: 0;
}
</style>
